<!DOCTYPE html>
<html lang="en">

<head>
	<title>Contact</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<style type="text/css">
		.error{
			color: red;
		}
		
	</style>
	<!-- Custom Theme files -->
	<link href="/staticwcopa/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
	<link href="/staticwcopa/css/style.css" type="text/css" rel="stylesheet" media="all">
	<link rel="/staticwcopa/stylesheet" href="/staticwcopa/css/index.css?rev=ac6ed5b7b7b35822066a7c1ff4367280">
	<link href="/staticwcopa/css/font-awesome.css" rel="stylesheet">
	<!-- font-awesome icons -->
	<!-- //Custom Theme files -->
	<!-- js -->
	<script src="/staticwcopa/js/jquery-2.2.3.min.js"></script>
	<!-- //js -->
	<!-- web-fonts -->
	<link href="http://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'
	    rel='stylesheet' type='text/css'>
	<!-- //web-fonts -->
</head>

<body>
	

	<!-- contact -->
	<div class="contact">
		<div class="container">
			<h3 class="agileits-title">Questionnaire</h3>
			<div class="contact-agileinfo">
				<form action="#" method="post" id="myform">
				   <div class="col-md-6 contact-right">
						<input type="text" class="form-top10" name="name" placeholder="姓名" required="">
						<select class="select-w100" name="sex">
							<option value="">性别</option>
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
						<select class="select-w100" name="education">
						    <option value="">学历</option>
							<option value="1">不限</option>
							<option value="2">初中</option>
							<option value="3">高中</option>
							<option value="4">中技</option>
							<option value="5">中专</option>
							<option value="6">大专</option>
							<option value="7">本科</option>
							<option value="8">硕士</option>
							<option value="9">博士</option>
							<option value="10">博士后</option>
						</select>
						<input type="text" class="kinerDatePickerInput"  id="kinerDatePickerInput3"  startYear="1950" default-val="1995-1-1" name="birthday" placeholder="出身年月" readonly>
						<!-- <div class="kinerDatePickerInput" id="kinerDatePickerInput3" startYear="1950" default-val="1995-1-1" name="birthday">出身年月</div> -->
						<input type="text" name="telephone" maxlength=11 placeholder="联系电话" required="">
						<select class="select-w100" name="marriage">
							<option value="">婚否</option>
							<option value="0">未婚</option>
							<option value="1">已婚</option>
							<option value="2">离异</option>
						</select>
						<input type="text" class="form-top10" name="nation" placeholder="民族" required="">
						<input type="text" class="form-top10" name="address" placeholder="住址" required="">
						<input type="text" class="form-top10" name="passportno" placeholder="护照号码" required="">
						<input type="text" class="form-top10" name="idcardno" placeholder="身份证" required="">
						<!-- <textarea name="Message" placeholder="Message" required=""></textarea>
						<input type="submit" value="SUBMIT"> -->
						<ul class="question">
							<li>
								<h5>1、七大项目<span class="text-red">（可选多个，请√选）</span>:</h5>
								<p>
									<input type="" style="display: none;" readonly="readonly" name="entries" id="entries" value="" />
									<label><input class="entries" data-name="entries" type="checkbox" value="1"/> 歌曲</label>
									<label><input class="entries" data-name="entries" type="checkbox" value="2"/> 舞蹈</label>
									<label><input class="entries" data-name="entries" type="checkbox" value="3"/> 演戏</label>
									<label><input class="entries" data-name="entries" type="checkbox" value="4"/> 乐器</label>
									<label><input class="entries" data-name="entries" type="checkbox" value="5"/> 模特</label>
									<label><input class="entries" data-name="entries" type="checkbox" value="6"/> 魔术杂技</label>
									<label><input class="entries" data-name="entries" type="checkbox" value="7"/> 非遗文化艺术（关于民族的特色的表演）</label>
								</p>
							</li>
							<li>
								<h5>2、您的年纪是？</h5>
								<p>
									<label><input name="agerange" type="radio" value="1"/> 4-15岁 </label>
									<label><input name="agerange" type="radio" value="2"/> 16-60岁 </label>
									<label><input name="agerange" type="radio" value ="3"/> 60岁以上 </label>
								</p>
							</li>
							<li>
								<h5>3、您以前是否参加过类似的活动？</h5>
								<p>
									<label><input name="experience" type="radio" value="1" /> 有 </label>
									<label><input name="experience" type="radio" value="2" /> 有听过，没有参加  </label>
									<label><input name="experience" type="radio" value="3" /> 从来都没有听说过 </label>
								</p>
							</li>
							<li>
								<h5>4、您参加《WCOPA》的原因是？</h5>
								<p>
									<label><input name="reason" type="radio"  value="1"/> 展现才艺，发展艺术之路 </label>
									<label><input name="reason"  type="radio" value="2"/> 礼品丰厚 </label>
									<label><input name="reason"  type="radio" value="3"/> 随大流参加 </label>
								</p>
							</li>
							<li>
								<h5>5、对于《WCOPA》比赛中的选手，您觉得最重要的是？</h5>
								<p>
									<label><input name="talenttype" type="radio" value="1"/> 专业实力 </label>
									<label><input name="talenttype" type="radio" value="2" /> 舞台表现 </label>
									<label><input name="talenttype" type="radio" value="3" /> 创意搞笑 </label>
								</p>
							</li>
						</ul>
					</div>
					<div class="col-md-6 contact-left">
						<ul class="question">
							
							<li>
								<h5>6、您是通过什么渠道知道《WCOPA》</h5>
								<p>
									<label><input name="infosource" type="radio" value="1" /> 短信 、网站 </label>
									<label><input name="infosource" type="radio" value="2" /> 社交软件  </label>
									<label><input name="infosource" type="radio" value="3" /> 同事、朋友告之 </label>
								</p>
							</li>
							<li>
								<h5>7、您觉得是否要增加活动的内容？</h5>
								<p>
									<label><input name="contestant" type="radio" value="1" /> 增加 </label>
									<label><input name="contestant" type="radio" value="2" /> 不增加 </label>
									<label><input name="contestant" type="radio" value="2" /> 增不增加无所谓 </label>
									<textarea name="contestant" aria-valuetext="4" placeholder="增加的内容是什么" required=""></textarea>
								</p>
							</li>
							<li>
								<h5>8、最喜欢的明星?</h5>
								<p>
									<input type="text" name="lovestar" placeholder="" required="">
								</p>
							</li>
							<li>
								<h5>9、最想跟谁学习?</h5>
								<p>
									<input type="text" name="followstar" placeholder="" required="">
								</p>
							</li>
							<li>
								<h5>10、近期最想参加谁的粉丝见面会/演唱会?</h5>
								<p>
									<input type="text" name="whichstarmeet" placeholder="" required="">
								</p>
							</li>
							<li>
								<h5>11、你觉得你是选手还是什么？</h5>
								<p>
									<input type="text" name="identity" placeholder="" required="">
								</p>
							</li>
							<li>
								<h5>12、近期最想得到一个什么样的礼物？</h5>
								<p>
									<input type="text" name="gift" placeholder="" required="">
								</p>
							</li>
							<li>
								<h5>13、最想去旅游的地方?</h5>
								<p>
									<input type="text" name="touring" placeholder="" required="">
								</p>
							</li>
						</ul>
						<input type="submit" value="提交" id="submit" class="question-btn"/>
						<div class="address address-mdl text-red">
							<h5>*参赛者须知*</h5>
							<p class="text-red">三大组别：初级组4-15岁、中级组15-45岁、高级组45岁以上</p>
							<p class="text-red">赛事分组：个人组、团体赛</p>
							<p class="text-red">**一分钟为评分标准，进行初赛和决赛，分门别类进行夺取金、银、铜之路**</p>
						</div>
					</div>
				</form>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>

	<!-- copy rights start here -->
	<!-- //copy right end here -->
	<!-- //password-script -->

	<script src="wcopa/js/SmoothScroll.min.js"></script>
	<!-- start-smooth-scrolling -->
	<script type="text/javascript" src="/staticwcopa/js/move-top.js"></script>
	<script type="text/javascript" src="/staticwcopa/js/easing.js"></script>
    <script src="/staticwcopa/js/libs/jquery.min.js"></script>
    <script src="/staticwcopa/js/libs/flexible.debug.js"></script>
    <script src="/staticwcopa/js/libs/flexible_css.debug.js"></script>
    <script src="/staticwcopa/js/libs/mobileFix.js"></script>
    <script src="/staticwcopa/js/libs/swiper.min.js"></script>
	<script src="/staticwcopa/js/libs/kinerDatePicker.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<script>
	$('#kinerDatePickerInput3').kinerDatePicker({
          clickMaskHide: true,
          showHandler: function (ctx) {
              console.log("显示时间选择器:",ctx);
          },
          hideHandler: function (ctx) {
              console.log("隐藏时间选择器:",ctx);
          },
          changeHandler: function (vals,ctx) {
              console.log("时间改变:",vals,ctx);
          },
          okHandler: function (vals, ctx) {
			  $(ctx).val(vals.join("-"))
              console.log("确定选择:",vals,ctx);
          },
          cancelHandler: function (ctx) {
              console.log("取消选择:",ctx);
          }
      });

      $('#btn3').click(function () {
          console.log($('#kinerDatePickerInput3').kinerDatePickerVal());
      });
	</script>
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- //end-smooth-scrolling -->
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function () {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/

			// $().UItoTop({
			// 	easingType: 'easeOutQuart'
			// });

		});
	</script>
	<script>
	$(function(){
		// $("#myform").submit(function(){ 
		// 	var data = $(this).serialize(); //序列化表单数据 
		// 	$.getJSON("http://127.0.0.1:8000/weixin/contestantAdd/jsonp.php?callback=?",data,function(json){ 
		// 		var msg = ''; 
		// 		if(json){ 
		// 		   var  sex = json.sex==1? "男生":"女生"; 
		// 		   msg = "<div id='result'><strong>提交成功！</strong><br/>姓名："+json.username+"<br/>性别:"+sex+"<br/>年龄:"+json.age+"</div>" 
		// 		}else{ 
		// 		   msg = "服务器忙，请稍候再试！"; 
		// 		} 
		// 		$("#myform").after(msg); //将返回信息插入页面对应的元素后 
		// 	}); 
		// 	return false; 
		// }); 
		// var params = $("#myform").serializeArray();
		// var values = {};
		// for (var item in params) {
		// values[params[item].name] = params[item].value;
		// }
		// console.log(values);
		// $.validator.setDefaults({
		// 	submitHandler: function(form) {   
		// 		console.log(params);   
		// 		// $(form).ajaxSubmit();     
		// 	} 
		// });
		// 判断用户输入的value是否满足传入的正则params的规范    
		//对validator扩展正则方法
		jQuery.validator.addMethod("pattern", function (value, element, params) {
			if (!params.test(value)) {
				return false;
			}
			return true;
		});
		// 身份证号码验证扩展正则方法
		jQuery.validator.addMethod("isIdCardNo", function(value, element) {
			return this.optional(element) || isIdCardNo(value);
		}, "请正确输入您的身份证号码");
		
		// 身份证号码验证扩展正则方法
		jQuery.validator.addMethod("isCheckbox", function(value, element) {
			console.log($(element).attr("name"));
			console.log(value)
		}, "");
		$("#myform").on("change","input[type=checkbox]",function(e){
			var _val=[];
			var _name = $(this).data("name");
			$('.'+_name+':checked').each(function(e){
				_val.push($(this).val());
			});
			$("input[name="+_name+"]").val(_val)
		})
		//============================================身份证验证 引入的方法开始=====================================
		function isIdCardNo(num) {
		    var factorArr = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2, 1);
		    var parityBit = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4","3", "2");
		    var varArray= new Array();
		    var intValue;
		    var lngProduct = 0;
		    var intCheckDigit;
		    var intStrLen = num.length;
		    var idNumber= num;
		    //initialize
		    if((intStrLen != 15) && (intStrLen !=18)) {
		       return false;
		    }
		    // check andset value
		    for (i = 0;i < intStrLen; i++) {
		       varArray[i] = idNumber.charAt(i);
		       if ((varArray[i] < '0' || varArray[i]> '9') && (i != 17)){
		           return false;
		       } else if (i < 17) {
		           varArray[i] = varArray[i] * factorArr[i];
		       }
		    }
		
		
		    if(intStrLen == 18) {
		       //check date
		       var date8 = idNumber.substring(6, 14);
		       if (isDate8(date8) == false) {
		           return false;
		       }
		       // calculate the sum of the products
		       for (i = 0; i < 17; i++) {
		           lngProduct = lngProduct + varArray[i];
		       }
		       // calculate the check digit
		       intCheckDigit = parityBit[lngProduct % 11];
		       // check last digit
		       if (varArray[17] != intCheckDigit) {
		           return false;
		       }
		    }
		    else{       //length is 15
		       //check date
		       var date6 = idNumber.substring(6, 12);
		       if (isDate6(date6) == false) {
		           return false;
		       }
		    }
		    return true;
		}
		function isDate6(sDate) {
		    if(!/^[0-9]{6}$/.test(sDate)) {
		       return false;
		    }
		    var year,month, day;
		    year =sDate.substring(0, 4);
		    month =sDate.substring(4, 6);
		    if (year< 1700 || year > 2500) returnfalse
		    if (month< 1 || month > 12) return false
		    return true
		}
		
		
		function isDate8(sDate) {
		    if(!/^[0-9]{8}$/.test(sDate)) {
		       return false;
		    }
		    var year,month, day;
		    year =sDate.substring(0, 4);
		    month =sDate.substring(4, 6);
		    day =sDate.substring(6, 8);
		    var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30,31]
		    if (year< 1700 || year > 2500) return false
		    if (((year %4 == 0) && (year % 100 != 0)) ||(year % 400 == 0)) iaMonthDays[1] = 29;
		    if (month< 1 || month > 12) return false
		    if (day< 1 || day > iaMonthDays[month - 1])return false
		    return true
		}
		//============================================身份证验证 引入的方法结束=====================================																							
		$("#myform").validate({
			debuge:true,
			rules: {
				name: "required",
				sex:"required",
				education:"required",
				birthday: "required",
				telephone: {
					required:true,
               		pattern: /13[5,6,7,8,9]\d{8}/,
					maxlength:11
				},
				marriage: "required",
				Nation: "required",
				address: "required",
				passportno: "required",//护照
				idcardno: {
					required:true,
					isIdCardNo:true
				},//身份证
				entries:{
					required:true,
					isCheckbox:true
				},
				agerange:"required"
			},
			messages: {
				name: "请输入姓名",
				sex: "请选择性别",
				education:"请选择学历",
				birthday: "请选择出生日期",
				telephone: "请填写正确的手机号码",
				marriage: "请选择是否结婚",
				Nation: "请填写民族",
				address: "请填写地址",
				passportno: "请填写正确的护照",//护照
				idcardno:"请填写有效的身份证信息",//身份证
				entries:{
					required: "兴趣爱好是不选项目",
        				minlength:"最少选择3个兴趣爱好"
				},
				agerange:"为选择年龄范围"
				
			},
			invalidHandler: function (form) {
				console.log($("#myform"))
				console.log($("#myform").serializeArray())
                alert('失败');
            },
            errorPlacement: function (error, element) { //指定错误信息位置
			      if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
			       var eid = element.attr('name'); //获取元素的name属性
			       console.log(element)
			       $(element).closest("li").append(error)
//			       error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
			     } else {
			       error.insertAfter(element);
			     }
			   },
            submitHandler: function (form) {
				var params = $("#myform").serializeArray();
				var values = {};
				for (var item in params) {
					values[params[item].name] = params[item].value;
				}
				alert(values);
				//console.log(values);
				// ===========================================在此处调用ajax方法,传参数 values============================
				// api.ajax({
				// 	url: "",
				// 	method: 'post',
				// 	data: values
				// }, function(json, err) {


				// });
                alert("提交事件!");
        	 }
		});
	
	})
	$(function() {
		// $('#submit').click(function() {
		// 	var d = {};
		// 	var t = $('form').serializeArray();
		// 	$.each(t, function() {
		// 	d[this.name] = this.value;
		// 	});
		// 	alert(JSON.stringify(d));
		// });
	});
	//校验身份证
	function check_id(value){
	var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子 
	var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码 
	if(/^\d{17}\d|x$/i.test(value)){  
		var sum = 0, idx; 
		for(var i = 0; i < value.length - 1; i++){ 
		// 对前17位数字与权值乘积求和 
		sum += parseInt(value.substr(i, 1), 10) * arrExp[i]; 
		} 
		// 计算模（固定算法） 
		idx = sum % 11; 
		// 检验第18为是否与校验码相等 
		return arrValid[idx] == value.substr(17, 1).toUpperCase(); 
	}else{ 
		return false; 
	} 
	}
    </script>
	<!-- //smooth-scrolling-of-move-up -->
	<!-- Bootstrap core JavaScript ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/staticwcopa/js/bootstrap.js"></script>
</body>

</html>